<template>
    <div>
        <div class="user-info-content user-set-content">
    <ul class="user-list">
        <li class="list-li">
            <div class="left">头像</div>
            <div class="right">
                <label class="choose"  for="inpheadimgurl"></label>
                <img :src="headimgurl">
                <input class="upload-img" id="inpheadimgurl"  type="file" @change="onFileChange($event,'headimgurl')"  accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple>
                <i class="icon"></i>
            </div>
        </li>
        <li class="list-li">
            <div class="left">名字</div>
            <!-- <div class="right name-right" @click="shownickhide=true"> -->
                <div class="right name-right" @click="caps()">
                <span class="text name_text">{{accountinfo.nickname}}</span>
                <i class="icon"></i>
            </div>
        </li>
        <li class="list-li">
            <div class="left">微信号</div>
            <div class="right name-right" @click="shownickhide_wx=true">
                <span class="text name_text" v-show="false"></span>
                <span class="text name_text" v-if="wechatId_wx!=''||accountinfo.wechatId!=''">{{accountinfo.wechatId}}</span>
                <span class="text name_text" v-else>对不起暂未绑定微信号</span>
                <i class="icon"></i>
            </div>
        </li>
        <li class="list-li">
            <div class="left">ID</div>
            <div class="right name-right_1">
                <span class="text">00{{accountinfo.id}}</span>
            </div>
        </li>
        <li class="list-li">
            <div class="left" >手机号</div>
            <div class="right name-right_1" @click="shownickhide_tel=true">
                <span class="text">{{accountinfo.phone}}</span>
                <i class="icon"></i>
            </div>
        </li>

    </ul>
</div>
<div class="hide-name" :class="{hidenameon:shownickhide}">
    <div class="top-info">
        <span class="cancle" @click="shownickhide=false">取消</span>
        <span class="finish" @click="updatenickname">完成</span>
    </div>
    <div class="bottom-info">
        <input type="text" v-model="nickmodi" class="usname"/>
        <i class="close-icon"></i>
    </div>
</div>
<div class="hide-name" :class="{hidenameon:shownickhide_wx}">
    <div class="top-info">
        <span class="cancle" @click="shownickhide_wx=false">取消</span>
        <span class="finish" @click="updatenickwxh">完成</span>
    </div>
    <div class="bottom-info">
        <input maxlength="20" type="text" placeholder="请输入微信账号" v-model="wechatId_wx" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"><!--禁止输入中文onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"-->
        <i class="close-icon"></i>    
    </div>
    <p>温馨提示：绑定微信号将会把微信号展示给你的上级，不填即为不展示特此声明！不填写提交则为取消绑定微信账号</p>
</div>
<div class="hide-name" :class="{hidenameon:shownickhide_tel}">
    <div class="top-info">
        <span class="cancle" @click="shownickhide_tel=false">取消</span>
        <span class="finish" v-show="false">完成</span>
    </div>
    <div class="bottom-info">
        <input type="text" v-model="tel" class="tel" readonly="readonly"/>
    </div>
    <p>温馨提示：手机号暂时不可修改</p>
    <p>您的推荐人可通过此号联系到您</p>
    <div class="rod">
       <label for="d2" @click="updatenicktel(0)">同意</label>
       <input name="tel" type="radio" id="d2" @click="updatenicktel(0)" :checked="telid_t==0"/>
       <label for="d1" @click="updatenicktel(1)">不同意</label>
       <input name="tel"  type="radio" id="d1" @click="updatenicktel(1)" :checked="telid_t==1"/>     
    </div>
</div>
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/user_info.css";
  .rod{
      margin-top: 30px;
  }
</style>
<script>
export default {
    data(){
        return{
           list:[],
           accountinfo:[],
           nickmodi:"",
           shownickhide: false,
           shownickhide_wx: false,
           shownickhide_tel:false,
           headimgurl:"",
           wechatId_wx:'',
           tel:'',
           telid:"0",
           telid_t:""
        }
    },
    mounted(){
         this.info();
    },
    methods:{
       info: function(){
            this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/info').then((response) => {
                      this.accountinfo =response.data.data;
                      this.headimgurl = this.accountinfo.headimgurl
                      this.nickmodi = this.accountinfo.nickname;
                      this.tel=this.accountinfo.phone
                      this.telid_t=this.accountinfo.locked
                      console.log(this.telid)
            }).catch(function(err){
              console.log(err)
            });
        },
        updatenickname:function(){
            this.$http.put(this.APIURL_PREFIX+'/api/wap/user/update',$.param({nickname: this.nickmodi,id:this.accountinfo.id})).then((response) => {
                console.log(response.data);
                if(0== response.data.code){
                    this.accountinfo.nickname = this.nickmodi;
                    console.log("修改成功")
                }
                else{
                    layer.msg(response.data.msg)
                }
                this.shownickhide = false;
            }).catch(function(err){
                console.log(err)
                this.shownickhide = false;
            });
        },
         updatenickwxh:function(){
            this.$http.put(this.APIURL_PREFIX+'/api/wap/user/update',$.param({wechatId: this.wechatId_wx,id:this.accountinfo.id})).then((response) => {
                if(0== response.data.code){
                    this.accountinfo.wechatId_wx = this.wechatId_wx;
                    console.log("修改成功")
                    this.info();
                }
                else{
                   layer.msg(response.data.msg)
                }
                this.shownickhide_wx = false;
            }).catch(function(err){
                console.log(err)
                this.shownickhide_wx = false;
            });
        },
        updateheadimg(){
            this.$http.put(this.APIURL_PREFIX+'/api/wap/user/update',$.param({headimgurl: this.headimgurl,id:this.accountinfo.id})).then((response) => {
                if(0== response.data.code){
                    this.accountinfo.wechatId_wx = this.wechatId_wx;
                    console.log("修改成功")
                    this.info();
                }
                else{
                   layer.msg(response.data.msg)
                }
                this.shownickhide_wx = false;
            }).catch(function(err){
                console.log(err)
            });
        },
         updatenicktel(tid){
             this.telid=tid;//0公开 //1不公开
                 this.$http.put(this.APIURL_PREFIX+'/api/wap/user/update',$.param({locked: this.telid,id:this.accountinfo.id})).then((response) => {
                console.log(response.data);
                if(0== response.data.code){
                    console.log("修改成功")
                    layer.msg("修改成功")
                 this.shownickhide_tel=false
                }
                else{
                   layer.msg(response.data.msg)
                    layer.msg("失败")
                   this.shownickhide_tel=false
                   
                }
               this.info();
            }).catch(function(err){
                console.log(err)
            });        
        },
          caps(){
              layer.msg('暂不可更改')
          },
        onFileChange: function (e,targetparam) {
            var files = e.target.files || e.dataTransfer.files;
            console.log(targetparam);
            console.log(this[targetparam]);
            if (!files.length) return;
            this.createImage(files, e,targetparam);
        },
        createImage: function (file, e,targetparam) {
            let vm = this;
            lrz(file[0], {width: 480 })
            .then(function (rst) {
                vm.$http({
                url: vm.APIURL_PREFIX+'/uploadForCertificate',
                method : "post",
                data : rst.formData
                }).then((response) => {
                console.log(response.data)
                if(0==response.data.code){
                    if(targetparam){
                        vm[targetparam]= response.data.msg;
                        vm.updateheadimg();
                    }
                    else{
                    vm.imgUrls.push(response.data.msg);
                    }
                }
                }).catch(function(err){
                layer.msg("上传失败");
                console.log(err)
                });
                return rst;
            }).always(function () {
            e.target.value = null;
            });
        }

    }
}
</script>

